---
title: Page data
order: 2
---

# Page data

**Essentially, vite-pages is a React app framework that collects your pages' data and passes them to your theme.** So what kinds of data does it collect?

Each page consists of two kinds of data:

- Static data
- Runtime data

Both of these page data are passed to the theme so that it can render the app.

> Fun fact: vite-pages itself doesn't render any concrete DOM node. All DOM nodes are rendered by [theme](/theme-customization).

## Static data

Static data usually contains the metadata of a page. Static data of **all pages** is loaded **eagerly** when the app bootstraps, so that the theme can render a side menu or a search box with this information.

> You should try to keep the static data as small as possible.

For `.tsx|.jsx` pages, you can define static data with **a docblock(comment) at the top of the file**.

```tsx
/**
 * @title index page
 * @tags tag1,tag2
 */
```

This will be collected as:

```json
{ "title": "index page", "tags": "tag1,tag2" }
```

For `.md|.mdx` pages, you can define static data with YAML front matter:

```md
---
title: my page
tags:
  - tag1
  - tag2
---
```

This will be collected as:

```json
{ "title": "my page", "tags": ["tag1", "tag2"] }
```

> As you can see, YAML front matter can express some simple data structure(.e.g array), while a docblock's properties can only express strings. A qualified theme should understand both of these.

## Runtime data

Runtime page data is whatever value you export from a page file. It contains the actual content of the page.

Most themes(e.g. [the official theme](/official-theme)) ask users to `export default` a React component from each page file. But that is not a requirement from vite-pages core. We will talk about this later.

## Difference

Both static data and runtime data are passed to the theme, so the theme can use them to render the app.

Difference:

- Static data of **all pages** is loaded **eagerly** when the app bootstrap. So you should try to keep the static data small.
- Runtime data is loaded **lazily** when a user navigates to that page.
- The value type of static data is limited (string or simple object/array), while the value of runtime data can be any javascript value (.e.g a React component).

## How themes consume these data

As stated in [the theme customization doc](/theme-customization), a theme is a React component. It will be rendered by vite-pages core, and get useful info from props:

- All pages' static data
- All runtime data that is already loaded
- The current loading state of the app

Here is the interface of a theme:

<FileText src="../../packages/react-pages/theme.doc.d.ts" syntax="ts" />

> Here is an example implementation of vite-pages theme: [vite-pages-theme-doc](https://github.com/vitejs/vite-plugin-react-pages/blob/main/packages/theme-doc/src/index.tsx). [This fixture](https://github.com/vitejs/vite-plugin-react-pages/blob/main/packages/playground/use-theme-doc/pages/_theme.tsx) demonstrate how to use it.

## Vite-pages core doesn't care what your page data looks like

Vite-pages itself doesn't care what the page data looks like. How to interpret the page data and render the view, is totally decided by [the theme](/theme-customization). Vite-pages just collect your pages' data and pass them to the theme. This design makes the vite-pages core more "simple" and makes themes more powerful.

Most themes(e.g. [the official theme](/official-theme)) ask users to `export default` a React component from each page file. But that is not a requirement from vite-pages core.

## Advanced topic: how vite-pages represent page data internally

Internally, vite-pages stores all pages' data inside a data structure like this:

```ts
interface PagesData {
  // pages are indexed by pageId which is route path like "/dir/page3"
  [pageId: string]: {
    // each page contains runtimeData and staticData
    data: {
      // the values are paths to the runtime data modules
      [key: string]: string
    }
    staticData: {
      // the values are serializable
      [key: string]: any
    }
  }
}
```

### Composed page data

You may wonder why runtimeData and staticData are maps and we use a `key` to index into them (instead of just one data for a page). This is because **vite-pages lets users create a page with multiple data pieces that originate from multiple files.**

> We use this feature in [the project scaffold](https://github.com/vitejs/vite-plugin-react-pages/blob/main/packages/create-project/template-lib/docs/vite.config.ts). We use it to display demos from multiple files in one page. You can init this sample project [with one command](/) (choose `lib` template).

Most filesystem routing mechanisms out there assume that each page maps to only one file. But vite-pages doesn't enforce that rule! This makes page data more flexible and programable.

Checkout [the advanced-fs-routing doc](/advanced-fs-routing) or ["Example: develop a component library"](/examples/component-library) to learn more about how to create a page with multiple data pieces that originate from multiple files.
